---
group: 'hooks'
category: 'state'
title: 'useDidUpdate'
description: 'useDidUpdate Hook executed when the component updates its dependencies. '
Order: 4
---

## Usage

useDidUpdate is identical to useEffect except that it ignores the first execution and only executes when dependencies are updated.

```jsx live=true
import React from 'react';
import { useDidUpdate } from '@kubed/hooks';
import { Button, Group } from '@kubed/components'

export default function App() {
   const [counter, setCounter] = React.useState(0);
   const [updateCount, setUpdateCount] = React.useState(0);
     useDidUpdate(() => {
       setUpdateCount((updateCount) => updateCount + 1)
     }, [counter]);

     return (
       <div>
         <p>counter:{counter}</p>
         <p>updateCount: {updateCount}</p>
         <Group spacing="xl">
           <Button onClick={() => setCounter((counter) =>counter + 1 )}> counter +1 </Button>
         </Group>
       </div>
     );
}

```

## API

```tsx

function useDidUpdate(
   fn: () => void,
   dependencies?: any[]): void
```
